import { useState, useEffect } from "react";
import { Form, message, Row, Col } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import { fmcgpurchasesAppointReceivingClerk, queryTakeUserList } from "../service";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import { SimpleTable } from "@/views/components/SearchTable/index";

const PickAssignmentModal = ({ visible, recordItem, checkedRows, handleCancel, fetchList }) => {
	const [form] = Form.useForm();
	const [goodsList, setGoodsList] = useState([]);
	const [codesArrayNum, setCodesArrayNum] = useState(false); //去支付弹窗
	const columns = [
		{
			title: "商品",
			dataIndex: "supplier",
			key: "supplier"
		},
		{
			title: "商品名称",
			dataIndex: "num",
			key: "num"
		},
		{
			title: "商品唯一码",
			dataIndex: "num",
			key: "num"
		},
		{
			title: "商品拿货金额",
			dataIndex: "num",
			key: "num"
		},
		{
			title: "实际退款金额",
			dataIndex: "num",
			key: "num"
		},
		{
			title: "退回门店",
			dataIndex: "num",
			key: "num"
		},
		{
			title: "退货员",
			dataIndex: "num",
			key: "num"
		},
		{
			title: "商品状态",
			dataIndex: "num",
			key: "num"
		}
	];
	const columns1 = [
		{
			title: "操作人账户",
			dataIndex: "supplier",
			key: "supplier"
		},
		{
			title: "操作页面",
			dataIndex: "num",
			key: "num"
		},
		{
			title: "操作节点",
			dataIndex: "num",
			key: "num"
		},
		{
			title: "操作时间",
			dataIndex: "num",
			key: "num"
		},
		{
			title: "操作内容",
			dataIndex: "num",
			key: "num"
		}
	];
	useEffect(() => {
		const codesArray = checkedRows.map(item => item.code);
		setCodesArrayNum(codesArray);
		if (visible) {
			form.resetFields();
		}
	}, [visible]);

	const onOk = () => {
		form.validateFields().then(async value => {
			const { success } = await fmcgpurchasesAppointReceivingClerk({
				pickerId: value.pickerId,
				uniqueCode: codesArrayNum,
				type: value.type
			});
			if (success) {
				message.success("操作成功");
				onCancel();
				fetchList();
			}
		});
	};
	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};
	const tableKey = "id";
	const sizeTableKey = "id";

	const searchSimpleTableProps = {
		tableKey,
		rowKey: "GoodsDetail1231",
		dataSource: goodsList,
		columns: columns,
		footer: false
	};
	const returnSearchSimpleTableProps = {
		tableKey,
		rowKey: "ReturnGoodsss11",
		dataSource: goodsList,
		columns: columns1,
		footer: false
	};
	return (
		<CommonModal
			title={{ title: "退货订单详情" }}
			visible={true}
			onOk={onOk}
			className="views-table-dialog"
			onCancel={onCancel}
			width="1200px"
			minHeight="150px"
		>
			<Row className="mb10">
				<Col span={4}>
					<span>用户名：</span> <span>张三</span>
				</Col>
				<Col span={4}>
					<span>系统订单号：</span> <span>张三</span>
				</Col>
				<Col span={4}>
					<span>物流名称：</span> <span>张三</span>
				</Col>
			</Row>
			<Row className="mb10">
				<Col span={4}>
					<span>物流单号：</span> <span>张三</span>
				</Col>
				<Col span={4}>
					<span>退款原因：</span> <span>张三</span>
				</Col>
				<Col span={4}>
					<span>退货备注：</span> <span>张三</span>
				</Col>
			</Row>
			<Row className="mb10">
				<Col span={4}>
					<span>买家备注：</span> <span>张三</span>
				</Col>
				<Col span={4}>
					<span>订单备注：</span> <span>张三</span>
				</Col>
				<Col span={4}>
					<span>退货申请凭证：</span> <span>张三</span>
				</Col>
			</Row>

			<SubTitle symbol as="s2" title="商品信息" wrapStyle={{ marginBottom: 16, marginTop: 20 }} />
			<div className="views-container">
				<SimpleTable key={tableKey} {...searchSimpleTableProps} />
			</div>
			<SubTitle symbol as="s2" title="退货进展" wrapStyle={{ marginBottom: 16, marginTop: 20 }} />
			<div className="views-container">
				<SimpleTable key={sizeTableKey} {...returnSearchSimpleTableProps} />
			</div>
		</CommonModal>
	);
};

export default PickAssignmentModal;
